<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all"  type="checkbox" v-model="isChecked">
    <label for="toggle-all"></label>
    <!-- 按键修饰符 -->
    <input
      @keyup.enter="add"
      v-model="name"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
    />
  </header>
</template>

<script>
export default {
  data() {
    return {
      name:''
    }
  },
 methods: {
   add(){
    //  发送子组件的数据给到父组件
     this.$emit('addtodo',this.name)
    //  表单清空
     this.name=""
   }
 },
 props:['list'],
 computed:{
   isChecked:{
     set(val){
       this.$emit('selected',val)
     },
     get(){
        return this.list.every(item=>item.isDone)
     }
   }
 }
}
</script>